<template>
  <div class="pages-user-analysis">
    <div class="pages-user-analysis--title" v-text="`${type}用户分析`"></div>
    <div class="pages-user-analysis--top">
      <div class="pages-user-analysis--top--twinkle">
        <circle-twinkle class="pages-user-analysis--top--twinkle__left" size="15px"></circle-twinkle>
        <circle-twinkle class="pages-user-analysis--top--twinkle__right" size="15px"></circle-twinkle>
      </div>
      <div class="pages-user-analysis--top__prebtn" @click="backClick"></div>
      <div class="pages-user-analysis--top__nextbtn" @click="nextClick"></div>
    </div>
    <div class="pages-user-analysis--online-count">
      <div class="line1">
        <number-flip
          style="margin: 6px;z-index: 5;position:relative;"
          :number="onlineNumber"
          font-size="42px"
          font-color="#ECFF87"
          :bgImage="['-webkit-linear-gradient(#131c45, #203e6a)', '-webkit-linear-gradient(#203e6a, #131c45)']"
          :min-count="7"
          space="4px"
        ></number-flip>
        <div class="lt"></div>
        <div class="rt"></div>
        <div class="lb"></div>
        <div class="rb"></div>
      </div>
      <div class="line2">
        <number-flip
          style="margin: 6px;z-index: 5;position:relative;"
          :number="onlineNumber"
          font-size="42px"
          font-color="#ffaa16"
          :bgImage="['-webkit-linear-gradient( #012c42, #1f506a)', '-webkit-linear-gradient(#1f506a, #012c42)']"
          :min-count="7"
          space="4px"
        ></number-flip>
        <div class="lt"></div>
        <div class="rt"></div>
        <div class="lb"></div>
        <div class="rb"></div>
      </div>
    </div>
    <div class="pages-user-analysis--open-stb">
      <gauge 
        width="100%" 
        height="100%" 
        :data="{value: 56.3, name: '%'}" 
        :axisLineStyleColor="[[0.1, 'green'], [0.7, 'rgb(0,255,255)'], [1, 'rgb(255,166,9)']]"
        :max="100"  
        :titleFontSize="40"
        detailFontWeight="600"
        :axisLineStyleWidth="5"
        :detailFontSize="60"
      ></gauge>
    </div>
    <div class="pages-user-analysis--op">
      <bar-3d class="pages-user-analysis--op--bar"
        width="480px"
        height="420px"
        :xAxis="{data: ['EPG', '直播', '点播', '回看', '时移'], color: 'rgb(17, 188, 250)'}"
        :yAxis="{color: 'gray', name: '万'}"
        :series="[{data: barData, color: ['rgb(79, 219, 251)', 'rgb(54, 151, 176, .5)']}]"
        :xy="[15, 5]"
        :showTopTipNumber="true"
        type="cylinder"
        direction="horizontal"
        fontSize="24px"
        topTipFontSize="20px"
        :padding="[100,5]"
      ></bar-3d>
      <div class="pages-user-analysis--op--bar-percent">
        <span v-for="v in barDataPercent" :key="v" v-text="v"></span>
      </div>
    </div>
    <div class="pages-user-analysis--online-user">
      <div class="line" ref="line"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PagesUserAnalysis',
  data() {
    return {
      onlineNumber: 112799,
      maxOnlineNumber: 134006,
      barData: [42518, 25100, 23477, 3100, 684],
      barDataPercent: [],
      onlineUser: {
        option: {
          grid: {
            top: 90,
            left: '5%'
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: [
              '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16',
              '17', '18', '19', '20', '21', '22', '23', '00', '01', '02'
            ],
            axisLabel: {
              textStyle: {
                fontSize: 20,
                color: 'rgb(204, 213, 243)'
              }
            }
          },
          yAxis: {
            type: 'value',
            name: '万人',
            nameTextStyle: {
              fontSize: 18,
              color: 'rgb(204, 213, 243)'
            },
            axisLabel: {
              textStyle: {
                fontSize: 20,
                color: 'rgb(204, 213, 243)'
              }
            }
          },
          series: [{
            data: [
              1, 2, 2, 5, 8, 10, 14, 15, 15, 14, 16, 18, 22, 27, 26, 20, 19, 15, 
              11, 10, 9, 4, 3, 2
            ],
            type: 'line',
            areaStyle: {},
            smooth: true
          }]
        }
      }
    }
  },
  computed: {
    type() {
      const t = {dx: '电信', yd: '移动', lt: '联通'};
      return t[this.$route.query.type];
    }
  },
  created() {
    console.log(this.$route.query.type);
    setInterval(_ => {
      this.onlineNumber ++;
    }, 5000);
    const total = this.barData.reduce((sum, curr) => sum + curr, 0);
    this.barData.forEach((item, i) => this.barDataPercent[i] = `${(item / total * 100).toFixed(2)}%`);
    
  },
  mounted() {
    const line = this.$Echarts.init(this.$refs.line);
    line.setOption(this.onlineUser.option);
  },
  methods: {
    backClick() {
      this.$router.push({name: 'Index'});
    },
    nextClick() {

    }
  }
}
</script>

<style lang="less" scoped>
@import "./style.less";
</style>